<template>
	<view class="app">
		<view class="warp" :if="show">
			<div class="spinner">
				<div class="bounce1"></div>
				<div class="bounce2"></div>
				<div class="bounce3"></div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
			};
		},
		name: 'loading',
	};
</script>

<style scoped lang="less">
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		height: 100%;
		margin: auto;
		position: fixed;
		top: 0px;
		z-index: 999;
		background: rgba(255,255,255,0.5);
	}

	.spinner {
		text-align: center;
		background: #00000069;
		width: 30%;
		padding: 2%;
		border-radius: 20rpx;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15),
			0 2px 2px rgba(0, 0, 0, 0.15),
			0 4px 4px rgba(0, 0, 0, 0.15),
			0 8px 8px rgba(0, 0, 0, 0.15);
	}

	.spinner>div {
		width: 28px;
		height: 28px;
		background-color: #fff;

		border-radius: 100%;
		display: inline-block;
		-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
		animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	}

	.spinner .bounce1 {
		-webkit-animation-delay: -0.32s;
		animation-delay: -0.32s;
	}

	.spinner .bounce2 {
		-webkit-animation-delay: -0.16s;
		animation-delay: -0.16s;
	}

	@-webkit-keyframes sk-bouncedelay {

		0%,
		80%,
		100% {
			-webkit-transform: scale(0)
		}

		40% {
			-webkit-transform: scale(1.0)
		}
	}

	@keyframes sk-bouncedelay {

		0%,
		80%,
		100% {
			-webkit-transform: scale(0);
			transform: scale(0);
		}

		40% {
			-webkit-transform: scale(1.0);
			transform: scale(1.0);
		}
	}
</style>
